<template>
  <div ref="info" v-loading="loading" class="box-card">
    <i class="el-icon-close closeRight" @click.stop="clearJumpId" />
    <div class="head-box-card padding20 clearfix">
      <el-row>
        <el-col :span="1" class="user_headimg" :offset="1">
          <span>&nbsp;</span>
        </el-col>
        <el-col :span="18">
          <span class="user_name">{{ item.companyName }}</span>
        </el-col>
        <el-col :span="4">
          <el-button-group>
            <el-button
              v-if="accreditChildren.editorCompany"
              type="primary"
              icon="el-icon-edit"
              @click="jumpId"
            >编辑公司</el-button>
          </el-button-group>
        </el-col>
      </el-row>
      <el-row class="top_cus_info">
        <el-col :offset="2" :span="2">
          <p>公司级别</p>
          <p>{{ item.level }}</p>
        </el-col>
        <el-col :offset="2" :span="2">
          <p>所在行业</p>
          <p>{{ item.industry }}</p>
        </el-col>
        <el-col :offset="2" :span="6">
          <p>所属部门</p>
          <p>{{ item.orgName }}</p>
        </el-col>
      </el-row>
      <div class="height3" style="margin-top:10px;" />
      <div class="only_margin20 clearfix">
        <el-col :span="15">
          <el-card shadow="never">
            <el-tabs v-model="activeName">
              <el-tab-pane label="联系人" name="first">
                <div class="clearfix">
                  <div class="left">
                    <el-input
                      v-model="updateTableInfo.keyword"
                      type="text"
                      placeholder="请输入内容"
                      maxlength="20"
                    />
                  </div>
                  <div class="left" style="marginLeft:5px">
                    <el-button type="primary" @click="searchInfoMations">搜 索</el-button>
                  </div>
                  <div class="right">
                    <el-button type="primary" @click="ShowAndInit">新增联系人</el-button>
                  </div>
                </div>
                <el-table
                  ref="multipleTable"
                  :data="linkManObj.arrList"
                  style="marginTop:20px;width: 100%"
                  tooltip-effect="dark"
                  @selection-change="handleSelectionChange"
                >
                  <el-table-column label="姓名" show-overflow-tooltip prop="linkManName" />
                  <el-table-column label="职务" show-overflow-tooltip prop="post" />
                  <el-table-column label="电话" show-overflow-tooltip prop="telePhone" />
                  <el-table-column label="手机" show-overflow-tooltip prop="phone" />
                  <el-table-column label="电子邮件" show-overflow-tooltip prop="emial" />
                  <el-table-column label="创建日期" show-overflow-tooltip prop="creationTime" />
                  <el-table-column label="操作" width="200">
                    <template slot-scope="scope">
                      <el-button
                        icon="el-icon-edit"
                        type="primary"
                        style="margin-right: 15px;"
                        @click="showAddLinkMan(scope.row)"
                      >编辑</el-button>
                      <el-button
                        icon="el-icon-delete"
                        type="danger"
                        @click="deleteRow(scope.row)"
                      >删除</el-button>
                    </template>
                  </el-table-column>
                </el-table>
                <Pagination
                  style="marginTop:10px;"
                  class="right"
                  :total-count="linkManObj.totalCount"
                  :page-size="page.pageNo"
                  :current-page="page.pageSize"
                  @handleSizeChange="handleSizeChange"
                  @handleCurrentChange="handleCurrentChange"
                />
              </el-tab-pane>
              <el-tab-pane label="基本信息" name="five">
                <basicInfo :item="item" :dics="dicsArr" />
              </el-tab-pane>
              <el-tab-pane label="公司介绍" name="second">
                <Editor :content="companyContent" @submitText="submitcompany" />
              </el-tab-pane>
              <el-tab-pane label="公司资质" name="third">
                <compAptitude :id="$props.id" :dics="dicsArr" />
              </el-tab-pane>
              <el-tab-pane label="文档" name="fourth">
                <aboutWord :files-type="filesType" :id="$props.id" />
              </el-tab-pane>
            </el-tabs>
          </el-card>
        </el-col>
        <el-col :span="9">
          <DynamicState :id="$props.id" :dics-arr="dicsArr" :work-dynamics-arr="workDynamicsArr" />
        </el-col>
      </div>
      <!-- 弹出新增联系人 -->
      <div v-if="ShowAddLinkMan">
        <el-dialog
          :title="this.isCreateLinkMan ? '新增联系人' : '编辑联系人'"
          :visible.sync="ShowAddLinkMan"
          :modal-append-to-body="false"
          :close-on-click-modal="false"
          :before-close="handleClose"
          center
          width="700px"
        >
          <el-form
            ref="form1"
            :model="linkManInfo"
            :rules="rules"
            label-width="100px"
            class="demo-ruleForm"
            style="height:500px;overflow-y:auto"
          >
            <el-form-item label="公司名称:">
              <el-input v-model="linkManInfo.companyName" style="width:202px;" disabled />
            </el-form-item>
            <el-form-item label="姓名:" prop="linkManName">
              <el-input v-model="linkManInfo.linkManName" style="width:202px;" />
            </el-form-item>
            <el-form-item label="手机:" prop="phone">
              <el-input v-model="linkManInfo.phone" style="width:202px;" placeholder="请输入手机" />
            </el-form-item>
            <el-form-item label="所属部门:" style="width:302px;" prop="orgId">
              <Department
                :tree-data="treeData"
                :default-props="defaultProps"
                :input-val="linkManInfo.orgName"
                @emitData="emitData"
              />
            </el-form-item>
            <el-form-item label="职务:">
              <el-input v-model="linkManInfo.post" style="width:202px;" placeholder="请输入职务" />
            </el-form-item>
            <el-form-item label="电话:" prop="telePhone">
              <el-input v-model="linkManInfo.telePhone" style="width:202px;" placeholder="请输入电话" />
            </el-form-item>
            <el-form-item label="电子邮件:" prop="emial">
              <el-input v-model="linkManInfo.emial" style="width:202px;" placeholder="请输入电子邮件" />
            </el-form-item>
            <el-form-item label="地址:">
              <el-input v-model="linkManInfo.adress" style="width:202px;" placeholder="请输入地址" />
            </el-form-item>
            <el-form-item label="部门:">
              <el-input v-model="linkManInfo.department" style="width:202px;" placeholder="请输入部门" />
            </el-form-item>
            <el-form-item label="微博:">
              <el-input v-model="linkManInfo.microblog" style="width:202px;" placeholder="请输入微博" />
            </el-form-item>
            <el-form-item label="省份:">
              <el-input v-model="linkManInfo.province" style="width:202px;" placeholder="请输入省份" />
            </el-form-item>
            <el-form-item label="邮政编码:" prop="postalCode">
              <el-input
                v-model="linkManInfo.postalCode "
                style="width:202px;"
                placeholder="请输入邮政编码"
              />
            </el-form-item>
            <el-form-item label="性别:">
              <el-radio v-model="linkManInfo.sex" label="男">男</el-radio>
              <el-radio v-model="linkManInfo.sex" label="女">女</el-radio>
            </el-form-item>
            <el-form-item label="出生日期:">
              <el-date-picker
                v-model="linkManInfo.birthday"
                style="width:202px;"
                format="yyyy 年 MM 月 dd 日"
                value-format="yyyy-MM-dd"
                type="date"
                placeholder="选择日期"
              />
            </el-form-item>
            <el-form-item label="备注:">
              <el-input
                v-model="linkManInfo.remark"
                type="textarea"
                placeholder="请输入内容"
                show-word-limit
                resize="none"
                maxlength="1000"
                rows="3"
              />
            </el-form-item>
          </el-form>
          <span slot="footer" class="dialog-footer">
            <el-button @click="handleClose">取 消</el-button>
            <el-button type="primary" @click="submitForm">确 定</el-button>
          </span>
        </el-dialog>
      </div>
      <!-- 弹出新增联系人 -->
    </div>
  </div>
</template>
<script>
import { _deleteMethods } from '~/utils/util';
import Department from '~/components/commom/department';
import mmUrl from '~/utils/utilUrl';
import initData from '~/utils/initData';
import Pagination from '~/components/commom/pagination';
import basicInfo from './basicInfo';
import Editor from '~/components/commom/Editor';
import compAptitude from './compAptitude';
import aboutWord from './aboutWord';
import DynamicState from './dynamicState';
import regular from '~/utils/regular';
export default {
  components: {
    Pagination,
    basicInfo,
    Editor,
    compAptitude,
    aboutWord,
    DynamicState,
    Department
  },
  props: ['id', 'pageHeight', 'updateRight', 'accreditChildren'],
  data() {
    return {
      linkManObj: {
        totalCount: 0,
        arrList: []
      },
      workDynamicsArr: [],
      isCreate: true,
      treeData: [],
      filesType: [],
      multipleSelection: [],
      defaultProps: { children: 'children', label: 'orgName' },
      textInformationId: '',
      companyContent: '',
      dicsArr: [],
      isCreateLinkMan: true,
      ShowAddLinkMan: false,
      updateTableInfo: {
        companyId: this.$props.id,
        keyword: ''
      },
      copyUpdateTableInfo: {
        companyId: this.$props.id,
        keyword: ''
      },
      page: {
        maxResultCount: 0,
        pageNo: 0,
        pageSize: 10,
        skipCount: 0
      },
      activeName: 'first',
      dataId: this.$props.id,
      linkManInfo: {
        adress: '',
        automaticId: 0,
        birthday: '',
        companyId: '',
        department: '',
        orgId: '',
        orgName: '',
        emial: '',
        linkManName: '',
        microblog: '',
        phone: '',
        post: '',
        postalCode: '',
        province: '',
        remark: '',
        sex: '男',
        telePhone: '',
        companyName: ''
      },
      loading: true,
      item: initData.BusinessDetail.item,
      rules: {
        // 表单验证规则
        linkManName: regular.require,
        telePhone: regular.telPhone,
        phone: regular.phone,
        emial: regular.email1,
        postalCode: regular.postcode,
        orgId: regular.requireChange
      }
    }
  },
  watch: {
    activeName(newName) {
      switch (newName) {
        case 'first':
          this.getTableDate()
          break;
        case 'second':
          this.TextInformation()
          break;
        case 'fourth':
          this.getFiles()
          break;
      }
    },
    id(newd) {
      this.dataId = newd
      this.updateTableInfo.companyId = newd
      this.copyUpdateTableInfo.companyId = newd
      this.getInitDate()
      switch (this.activeName) {
        case 'first':
          this.getTableDate()
          break;
        case 'second':
          this.TextInformation()
          break;
        case 'fourth':
          this.getFiles()
          break;
      }
    },
    updateRight() {
      this.getInitDate()
    }
  },
  mounted() {
    this.linkManInfo.companyId = this.$props.id
    this.getInitDate()
  },
  methods: {
    clearJumpId() {
      this.$emit('clearJumpId')
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    getFiles() {
      this.$post({
        url: mmUrl.file.getfiles,
        data: {
          dataId: this.$props.id,
          typeCode: 'COMPANY_FILE_FILE'
        }
      }).then(res => {
        this.filesType = res
      })
    },
    emitData(res) {
      this.$set(this.linkManInfo, 'orgId', res.id)
      this.$set(this.linkManInfo, 'orgName', res.orgName)
    },
    getInitDate() {
      this.$post({
        url: mmUrl.enterprise.loadView,
        data: {
          companyLinkManInput: {
            companyId: '',
            keyword: '',
            page: {
              maxResultCount: 0,
              pageNo: 0,
              pageSize: 10,
              skipCount: 0
            }
          },
          id: this.$props.id
        }
      })
        .then(res => {
          this.item = res.item
          this.dicsArr = res.dics
          this.loading = false
          this.linkManObj.arrList = res.companyLinkMans.items.items
          this.linkManObj.totalCount = res.companyLinkMans.items.totalCount
          this.workDynamicsArr = res.workDynamics.items
          this.$nextTick(() => {
            this.$refs['info'].style.height = this.$props.pageHeight + 'px';
          })
        })
        .catch(err => this.$message.error(err))
    },
    TextInformation() {
      this.$post({
        url: mmUrl.text.get,
        data: {
          dataId: this.dataId,
          typeCode: 'COMPANY_INTRODUCTION'
        }
      }).then(res => {
        if (res.item) {
          this.isCreate = false
          this.textInformationId = res.item.id
          this.companyContent = res.item.content
        }
      })
    },
    submitcompany(res) {
      const item = this.isCreate
        ? {
          content: res.text,
          dataId: this.$props.id,
          dataType: '公司介绍详情',
          typeCode: 'COMPANY_INTRODUCTION'
        }
        : {
          id: this.textInformationId,
          content: res.text
        }
      this.$post({
        url: this.isCreate ? mmUrl.text.create : mmUrl.text.editor,
        data: {
          item
        }
      }).then(() => {
        this.$message({
          type: 'success',
          message: '操作成功'
        })
        this.TextInformation()
      })
    },
    jumpId() {
      this.$emit('editor')
    },
    getTableDate(res) {
      let data = {}
      if (res) {
        data = res
      } else {
        data.page = JSON.parse(JSON.stringify(this.page))
        Object.assign(data, this.updateTableInfo)
      }
      this.$post({
        url: mmUrl.linkMan.getCompanyLinkMans,
        data: data
      }).then(res => {
        this.linkManObj.arrList = res.items.items
        this.linkManObj.totalCount = res.items.totalCount
      })
    },
    ShowAndInit() {
      this.isCreateLinkMan = true
      this.ShowAddLinkMan = true
      this.linkManInfo.companyName = this.item.companyName
      this.$post({
        url: mmUrl.linkMan.loadCreate,
        data: {
          id: ''
        }
      }).then(res => {
        this.treeData = res.orgs
      })
    },
    submitForm() {
      this.$refs['form1'].validate(valid => {
        if (valid) {
          if(this.linkManInfo.phone){
            this.linkManInfo.phone.includes('*')? delete this.linkManInfo.phone :''
          }
          this.linkManInfo.companyId = this.$props.id
          this.$post({
            url: this.isCreateLinkMan
              ? mmUrl.linkMan.create
              : mmUrl.linkMan.editor,
            data: {
              item: this.linkManInfo
            }
          })
            .then(res => {
              this.getTableDate()
              this.$message({
                type: 'success',
                message: '操作成功'
              })
              this.handleClose()
            })
            .catch(res => {
              this.$message.error(res)
            })
        }
      })
    },
    handleClose() {
      this.ShowAddLinkMan = false
      this.$refs['form1'].resetFields()
    },
    showAddLinkMan(row) {
      this.isCreateLinkMan = false
      this.ShowAddLinkMan = true
      this.linkManInfo = JSON.parse(JSON.stringify(row))
      this.linkManInfo.companyName = this.item.companyName
    },
    deleteRow(row) {
      const that = this
      _deleteMethods(mmUrl.linkMan.delete, row, that).then(() => {
        that.getTableDate('no')
      })
    },
    searchInfoMations(res) {
      res === 'no' ? '' : (this.page.pageNo = 0)
      let result = {}
      result.page = JSON.parse(JSON.stringify(this.page))
      this.copyUpdateTableInfo = JSON.parse(
        JSON.stringify(this.updateTableInfo)
      )
      Object.assign(result, this.copyUpdateTableInfo)
      this.getTableDate(result)
    },
    handleSizeChange(val) {
      const result = sizeChange(val, this.page, this.copyUpdateTableInfo)
      this.changeTableDate(result)
    },
    handleCurrentChange(val) {
      const result = sizeChange(val, this.page, this.copyUpdateTableInfo)
      this.changeTableDate(result)
    }
  }
}
</script>

<style lang='scss'>
.only_margin20 {
  & > div:first-of-type {
    box-sizing: border-box;
    padding-right: 10px;
  }
}

.dynamic_list {
  color: rgb(140, 159, 178);

  a {
    color: rgb(45, 149, 203);
  }
}

.user_name {
  margin-right: 15px;
}

.top_cus_info {
  .el-col > p:first-of-type {
    color: rgb(142, 160, 177);
  }
  .el-col > p {
    line-height: 30px;
  }
}

.user_headimg img {
  width: 40px;
  height: 40px;
  border-radius: 5px;
}

.top_cus_info {
  margin-top: 10px;

  div {
    text-align: left;
    line-height: 30px;
  }
}
</style>
